﻿const {TreeSelect, Icon, Tree, Input } = antd;
const {TreeNode} = Tree;
class Page extends React.Component {
    state = Object.assign(mountData, {
        value: undefined
    });
    onChange = (value) => {
    	console.log(value)
        this.setState({ value });
    }
    onSelect = (selectedKeys, info) => {
	    console.log('selected', selectedKeys, info);
	}
    render() {
    	const _this = this;
    	const {value} = this.state
        return (
        	<div>
                <TreeSelect
                    style={{ marginTop: 50, marginLeft: 50, width: 300}}
                    value={value}
                    dropdownStyle={{ maxHeight: 400, overflow: 'auto'}}
                    placeholder="Please select"
                    allowClear
                    onChange={this.onChange}
                >
                    <TreeNode value="parent" title={<span><Icon type="setting" theme="twoTone" twoToneColor="#eb2f96"/>父级（图标自定义）</span>} key="0-1">
                    <TreeNode value="parent 1-0" title="子级1" key="0-1-1">
                        <TreeNode value="子级1-1" title="子级1-1" key="random" />
                        <TreeNode value="子级1-2" title="子级1-2" key="random1" />
                    </TreeNode>
                    <TreeNode value="子级2" title="子级2" key="random2">
                        <TreeNode value="子级2-1（文字样式自定义）" title={<b style={{ color: '#08c' }}>子级2-1（文字样式自定义）</b>} key="random3" />
                    </TreeNode>
                    </TreeNode>
                </TreeSelect>
                <div style={{ marginTop: 50, marginLeft: 50}}>
	                <Tree
	                	showLine
				        defaultExpandedKeys={['0-0-0']}
				        onSelect={this.onSelect}
				      >
				        <TreeNode title="父级" key="0-0">
				          <TreeNode title="子级0" key="0-0-0">
				            <TreeNode title="子级1-0" key="0-0-0-0" />
				            <TreeNode title="子级1-1" key="0-0-0-1" />
				            <TreeNode title="子级1-2" key="0-0-0-2" />
				          </TreeNode>
				          <TreeNode title="子级1" key="0-0-1">
				            <TreeNode title="子级1-0" key="0-0-1-0" />
				          </TreeNode>
				        </TreeNode>
			        </Tree>
			      <br/>
			        <div className="example-input">
			        	表单元素外部样式引入例
			        	<br/>
	                	<Input size="large" placeholder="css 样式文件引入测试" />
	                </div>
                </div>
            </div>
        );
    }
}
